Nx，強大的工具包！

弄清楚Nx是一個集合式的套件組合包後，接下來顯而易見我們會想問：

Q：
既然Nx是一個外掛工具的集合包
請問它內建了哪些開發工具？

(我一樣只放小標)

Nx 提供了一個強大的開發環境，內建了許多工具和功能，以支援和加速開發過程。以下是一些 Nx 內建的主要開發工具和特性：

1.工作空間管理
2.智能建構和測試
3.代碼生成和模板化
4.依賴圖表和分析
5.插件架構
6.跨框架支援
7.共享設置和配置
8.支援Monorepo管理

這些工具和特性共同構成了 Nx 的核心功能，幫助開發者更有效地管理和開發大型專案或多個相關專案。它們提供了一個一致、靈活和強大的開發環境，有助於提高開發的速度和質量。

.

從上面的敘述和Nx的主要功能，我們不難發現Nx是一個專注於建構「前端基礎建設(Frontend Infrastructure)」的套件，透過Nx我們可以輕鬆的導入Frontend Infra在團隊的專案內。

針對ChatGPT列出的這8點，我列出特別感興趣的地方做進一步的說明。

一、 工作空間管理(1)、共享設置和配置(7)

這點在說的其實就是Nx內建Monorepo的快捷設定。但不要小看「Monorepo」，就我目前為止的了解，我認為Monorepo的專案結構設計，是Nx在優化前端專案管理最重要的手段。

根據ChatGPT提供的資訊：

1. Nx 提供了一個統一的工作空間，用於管理多個相關的應用程式和庫。這有助於代碼重用和整個專案的一致性。
2. 很多大型組織和專案就是利用Nx來管理部署在不同網域上的多個專案

也就是說，在Monorepo的結構下，允許我們在同一個Repo裡放不同的project，再把他們部署到不同網域上面。

至於為什麼Monorepo(統一的工作空間)可以「有助於代碼重用和整個專案的一致性」？

這是因為在這個統一的工作空間裡有個資料夾名為「libs」，專門用來放共用的程式。我們可以抽出重複的程式碼，甚至整合跨專案間針對同一個功能、服務的做法(例如：時間比大小驗證、某個功能的自訂元件...等等)，來達到跨專案、跨系統的一致性管理。
.
.

二、智能建構和測試(2)、依賴圖表和分析(7)

根據ChatGPT提供的訊息，在「智能建構和測試」的具體項目是：

1. 分析影響：
Nx 能夠精確地識別出你所更改的代碼會影響到哪些部分的應用程式或庫。

2. 僅針對更改進行建構和測試：
Nx 會僅重新建構和測試那些受到更改影響的部分，而不是整個專案。

我們在維護系統都有過這樣的經驗，PM告訴我們有哪個地方的間距想要微調一下。雖然這個commit只改了一個小東西，但我們仍然要跑完全部的測試(呃如果有寫的話XD)才能部署到測試機/正式機上。

因此，第二點就能派上用場了。Nx會和上一個版本去比較，僅針對有異動的部分去做測試。同時，它會有上一次測試的快取，因此沒有異動的程式就會直接使用上一次快取的結果。

.

「依賴圖表和分析」功能我覺得蠻酷的！

Nx提供一個圖表，可以呈現各個專案之間的關係，你可以去拖動、點擊和這個圖表做互動，讓你可以更了解不同檔案、程式的組成結構，以及彼此依賴關係。大家有興趣的話，可以看一下官方的Demo影片。

(圖片來源：官方影片截圖)
.

有了這個圖表，就可以輕鬆做到剛剛所提到的「分析影響」。

我們都有過這樣的經驗，接到一個需求去調整某個元件，但這個調整可能會影響到許多地方。接著，我們穿梭在不同檔案之間去檢查，確認這個修改不會影響到其他地方。這時候視覺化圖表工具就可以派上用場了，幫助我們更全局觀的去掌握整個專案。

.
.
.

Angualr Universal vs Nx內建的SSR設定

說來也蠻不好意思的，就是我在這個系列文寫到一半才發現.....Nx就有內建快捷指令可以設定SSR囧

.

當我知道Nx也可以設定SSR後，我就在猶豫我要用哪一個服務去設定。由於這是我第一次使用Nx，ChatGPT也不斷提醒我這有一定的學習門檻，讓我很猶豫。

因此我對ChatGPT發起了一系列的靈魂拷問。

請問使用 Angular Universal執行SSR
和 使用Nx內建的SSR設定
哪一個的學習成本比較低？

我已經在Nx 工作區中工作，要怎麼設定Nx的SSR？ 

使用Nx進行SSR設定要怎麼做？

使用Nx和Angular Universal進行SSR設定，各有什麼優缺點？

Nx的SSR設定是在Angular Universal推出以後，才開發出來的嗎？

.
在ChatGPT的回答之中，我得到以下結論：

1. SSR的部署需要特別研究，既然我都使用Nx了，就可以一起研究他們的部署設定
2. 通常使用Nx建立Angular專案的開發者，在設定SSR的時候更傾向使用Nx內建的設定
3. 由於Nx推出SSR設定的時間晚於Angular Universal，因此部分服務進行了一定程度的優化

基於以上理由，我最後決定直接挑戰使用Nx內建的SSR設定去做導入。

.
.
.

今日心得